<template>
	<view class="content f fv">
		<view class="top-bar f fac fpj">
			<view class="top-bar-left">
				<image src="../../static/images/img/three.png" mode=""></image>
			</view>
			<view class="top-bar-right f fac fpj">
				<image class="search" src="../../static/images/index/search.png" mode="" @click="toSearch"></image>
				<image class="add" src="../../static/images/index/add.png" mode=""></image>
			</view>
		</view>
		<view class="message-list f fv f1">
			<view class="message-item f" v-for="item in 16" @click="goCeshi">
				<view class="message-left">
					<view class="message-num f fac fpc">2</view>
					<image src="../../static/images/img/three.png" mode=""></image>
				</view>
				<view class="message-right f fv fpj f1">
					<view class="f fac fpj">
						<text class="name">赵丽颖</text>
						<text class="time">9:12</text>
					</view>
					<view class="message-content">
						你好啊
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			goCeshi() {
				uni.reLaunch({
					url:  '/pages/login/login'
				})
			},
			toSearch() {
				uni.navigateTo({ url:"/pages/search/search" })
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		// padding: 0 32rpx;
		overflow: hidden;
		.top-bar {			
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 88rpx;
			background-color: $uni-bg-color;
			box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
			box-sizing: content-box;
			// padding: 0 32rpx;
			padding-top: var(--status-bar-height);
			.top-bar-left {
				width: 68rpx;
				height: 68rpx;
				border-radius: 16rpx;
				margin-left: 32rpx;
				image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
			.top-bar-right {
				margin-right: 32rpx;
				image {
					display: block;
				}
				.search {
					width: 52rpx;
					height: 52rpx;
					margin-right: 20rpx;
				}
				.add {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.message-list {
			margin-top: 88rpx;
			padding-top: var(--status-bar-height);
			overflow-y: scroll;
			&::-webkit-scrollbar {
				display: none !important;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
			}
			.message-item {
				// margin-top: 20rpx;
				padding: 18rpx 32rpx;
				&:nth-child(1) {
					margin-top: 10rpx;
				}
				&:active {
					background-color: $uni-bg-color-grey;
				}
				.message-left {
					position: relative;
					width: 96rpx;
					height: 96rpx;
					border-radius: 24rpx;
					margin-right: 32rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 24rpx;
					}
					.message-num {
						position: absolute;
						top: -10rpx;
						left: calc(96rpx - 28rpx);
						z-index: 1;
						width: fit-content;
						min-width: 36rpx;
						height: 36rpx;
						padding: 0 10rpx;
						background: #FF5D5B;
						border-radius: 18rpx;
						color: #fff;
						font-size: 24rpx;
					}
				}
				.message-right {
					.name {
						font-size: 36rpx;
						color: $uni-text-color;
					}
					.time {
						font-size: 24rpx;
						color: rgba(39,40,50,0.40);
					}
					.message-content {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						color: rgba(39,40,50,0.60);
					}
				}
			}
		}
	}
</style>
